/* eslint-disable react/jsx-closing-tag-location */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/no-unused-state */
/* eslint-disable no-param-reassign */
/* eslint-disable array-callback-return */
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  DownloadOutlined,
  DownOutlined,
  UpOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Row,
  Col,
  Card,
  Input,
  Button,
  Modal,
  message,
  Badge,
  Divider,
  Tabs,
  Tooltip,
  DatePicker,
  Radio,
  Select,
  Dropdown,
  Menu,
} from 'antd';
import queryString from 'query-string';
import router from 'umi/router';
import Link from 'umi/link';
import moment from 'moment';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import ProTable from '@/pages/components/Problem/ProblemPage/ProTable';
import ProExportBtn from '@/pages/components/Problem/ProblemPage/ProExportBtn';
import ProModal from '@/pages/components/Problem/ProblemPage/ProModal';
import Authorized from '@/utils/Authorized';
import styles from '@/utils/utils.less';
import downloadFile, { getProPagination } from '@/utils/utils';
import { checkPermissions } from '@/utils/authority';
import TextOverFlow from '../../components/TextOverFlow';
import proIcon from '../../../assets/proIcon.png';
import Area from '../../components/Area';

const FormItem = Form.Item;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Option } = Select;
const { TextArea } = Input;

@connect(({ publicdata, addemprec, reducemprec, loading }) => ({
  dictCode: publicdata.dictCode,
  data: reducemprec.data,
  supplyList: addemprec.supplyList,
  custList: addemprec.custList,
  // reducemprec
  proListData: reducemprec.proListData, // 问题人员
  loading: loading.models.reducemprec,
  cancelReceiveLoading: loading.effects['reducemprec/cancelReceive'],
  formFieldsValue: reducemprec.formFieldsValue,
  expandForm: reducemprec.expandForm,
  activeKey: reducemprec.activeKey,
  tabList: reducemprec.tabList,
  downloadParams: reducemprec.downloadParams,
}))
@Form.create()
class TableList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      formValues: {},
      expandForm: false,
      selectedRows: [],
      selectedRowKeys: [],
      editFlag: null,
      cancelReceiveVisible: false, // 取消接单办理备注
      confirmLoading: false,
      proTable: {},
      proVisible: false,
    };

    this.tableSearchLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };
  }

  componentDidMount() {
    const {
      location,
      activeKey,
      dispatch,
      params,
      data: { pagination },
    } = this.props;
    const { isMenuLink } = queryString.parse(location.search);
    const tempActiveKey = queryString.parse(location.search).activeKey || activeKey;
    dispatch({
      type: 'reducemprec/updateModelData',
      payload: {
        activeKey: tempActiveKey,
        proBaseList: {},
        proFbList: [],
      },
    });
    const proPagination = getProPagination(tempActiveKey, '4', pagination);
    if (isMenuLink) {
      this.resetAndGeLlist(location);
    } else {
      this.getList(tempActiveKey, proPagination.current, proPagination.pageSize);
    }
    this.getCustList(null);
    dispatch({
      type: 'addemprec/fetchSupplyList',
      payload: { name: null, ...params },
    });
  }

  // 获取客户的下拉
  getCustList = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'addemprec/getcustNamesList',
      payload: {
        suppId: e,
      },
    });
  };

  getsuppId = e => {
    const { supplyList, form } = this.props;
    form.resetFields(['custId']);
    supplyList.map(item => {
      if (item.suppId === e) {
        this.getCustList(item.suppId);
      }
      return true;
    });
  };

  getData = (value, id) => {
    const { form } = this.props;
    if (id) {
      form.setFieldsValue({ [id]: value });
      this.setState({ [id]: value });
    }
  };

  // 获取列表
  getList = (activeKey = '1', currentPage = 1, pageSize = 10, queryParam, isClear = true) => {
    if (isClear) {
      this.setState({ selectedRows: [], selectedRowKeys: [] });
    }
    const { dispatch, form } = this.props;
    const { editFlag } = this.state;
    form.validateFields((err, fieldsValue) => {
      delete fieldsValue.remark;
      if (err) return;
      fieldsValue = queryParam || fieldsValue;
      const formFieldsValue = {};
      Object.keys(fieldsValue).forEach(key => {
        if (key === 'empName' || key === 'idCode') {
          fieldsValue[key] = (fieldsValue[key] && fieldsValue[key].trim()) || null;
        }
        if (key === 'createTime') {
          formFieldsValue.operTimeStart = fieldsValue.createTime
            ? fieldsValue.createTime[0].format('YYYY-MM-DD')
            : null;
          formFieldsValue.operTimeEnd = fieldsValue.createTime
            ? fieldsValue.createTime[1].format('YYYY-MM-DD')
            : null;
          // eslint-disable-next-line no-param-reassign
          delete fieldsValue[key];
        }
        formFieldsValue[key] = fieldsValue[key] === undefined ? null : fieldsValue[key];
      });
      const pageArg = { currentPage, pageSize };
      const values = {
        hdlState: activeKey,
        editFlag,
        ...formFieldsValue,
        pageArg,
      };
      // if (activeKey === '4') {
      //   dispatch({
      //     type: 'reducemprec/fetchProList',
      //     payload: {
      //       ...values,
      //       busiType: 2,
      //     },
      //   });
      // } else {
      //   dispatch({
      //     type: 'reducemprec/fetchList',
      //     payload: values,
      //   });
      // }

      const downloadParams = {
        ...formFieldsValue,
        busiType: 9,
        hdlState: activeKey,
        editFlag,
      };
      dispatch({
        type: 'reducemprec/updateModelData',
        payload: {
          downloadParams,
        },
      });
      if (activeKey && Number(activeKey) === 4) {
        setTimeout(() => {
          const { proTable } = this.state;
          const proFormFieldsValue = { ...downloadParams };
          if (proTable.searchList) {
            proTable.searchList(proFormFieldsValue, currentPage, pageSize);
          }
        });
      } else {
        dispatch({
          type: 'reducemprec/fetchList',
          payload: values,
        });
      }

      this.setState({
        formValues: values,
      });
    });
  };

  // 获取页签数量
  getTabNum = (activeKey, currentPage = 1, pageSize = 10) => {
    const { tabList, dispatch, form } = this.props;
    const { editFlag } = this.state;
    const newTabList = tabList.map(item => ({ ...item, isHas: false }));
    dispatch({
      type: 'reducemprec/updateModelData',
      payload: { tabList: newTabList },
    });
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      dispatch({
        type: 'reducemprec/updateModelData',
        payload: {
          formFieldsValue: fieldsValue,
          activeKey,
        },
      });
      const formFieldsValue = {};
      Object.keys(fieldsValue).forEach(key => {
        if (key === 'empName' || key === 'idCode') {
          fieldsValue[key] = (fieldsValue[key] && fieldsValue[key].trim()) || null;
        }
        formFieldsValue[key] = fieldsValue[key] === undefined ? undefined : fieldsValue[key];
      });
      const checkHasValue = Object.keys(fieldsValue).some(
        key => Boolean(fieldsValue[key]) !== false
      );
      if (!checkHasValue) {
        this.getList(activeKey);
      }
      this.setState({
        selectedRows: [],
        selectedRowKeys: [],
      });

      const values = {
        // hdlState: activeKey,
        editFlag,
        ...formFieldsValue,
      };
      dispatch({
        type: 'reducemprec/updateModelData',
        payload: values,
      });
      Object.keys(fieldsValue).forEach(key => {
        if (key === 'createTime') {
          formFieldsValue.operTimeStart = fieldsValue.createTime
            ? fieldsValue.createTime[0].format('YYYY-MM-DD')
            : null;
          formFieldsValue.operTimeEnd = fieldsValue.createTime
            ? fieldsValue.createTime[1].format('YYYY-MM-DD')
            : null;
          // eslint-disable-next-line no-param-reassign
          delete fieldsValue[key];
        }
        formFieldsValue[key] = fieldsValue[key] === undefined ? null : fieldsValue[key];
      });
      this.setState({
        formValues: formFieldsValue,
      });
      if (activeKey === '4') {
        const downloadParams = {
          ...formFieldsValue,
          busiType: 9,
          hdlState: activeKey,
          editFlag,
        };
        dispatch({
          type: 'reducemprec/updateModelData',
          payload: {
            downloadParams,
          },
        });
      }
      const tabvalues = {
        // hdlState: activeKey,
        editFlag,
        ...formFieldsValue,
        currentPage,
        pageSize,
      };
      dispatch({
        type: 'reducemprec/fetchTabNum',
        payload: tabvalues,
      });
    });
  };

  // 切换表格展开收起
  toggleForm = () => {
    const { expandForm, dispatch } = this.props;
    dispatch({
      type: 'reducemprec/updateModelData',
      payload: {
        expandForm: !expandForm,
      },
    });
  };

  // 回单
  orderreceipt = (e, record) => {
    const { selectedRowKeys } = this.state;
    if (record) {
      router.push(
        `/receiveordermanage/reduceemployee/receipt?recvOrdAddTaskId=${
          record.recvOrdCutTaskId
        }&isModify=${e}`
      );
    } else if (selectedRowKeys.length === 1) {
      router.push(
        `/receiveordermanage/reduceemployee/receipt?recvOrdAddTaskId=${selectedRowKeys}&isModify=${e}`
      );
    } else {
      message.warning('请选择一项进行回单');
    }
  };

  // 点击复选框
  handleSelectRows = (selectedRows, selectedRowKeys) => {
    this.setState({ selectedRows, selectedRowKeys });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { activeKey } = this.props;
    this.getList(activeKey, pagination.current, pagination.pageSize, undefined, false);
  };

  // 重置
  resetSearch = () => {
    const { form, dispatch } = this.props;
    dispatch({
      type: 'reducemprec/updateModelData',
      payload: {
        formFieldsValue: {},
      },
    });
    form.resetFields();
    form.setFieldsValue({ createTime: null });
    this.getCustList(null);
  };

  // 切换页签
  changeTabPane = activeKey => {
    const { dispatch } = this.props;
    if (activeKey === '3') {
      this.setState({ editFlag: undefined });
    }
    router.push({
      pathname: '/receiveordermanage/reduceemployee/index',
      query: {
        activeKey,
      },
    });
    const { tabList } = this.props;
    tabList.map(item => {
      if (item.itemCode === activeKey) {
        item.isHas = false;
      }
    });
    dispatch({
      type: 'reducemprec/updateModelData',
      payload: {
        activeKey,
        tabList,
      },
    });
    this.setState({ selectedRows: [], selectedRowKeys: [] }, () => {
      this.getList(activeKey);
    });
  };

  // 接单
  receive = () => {
    const { selectedRowKeys } = this.state;
    if (!selectedRowKeys.length) {
      Modal.confirm({
        icon: <QuestionCircleOutlined />,
        title: '温馨提示',
        content: '如果不选择列表数据，则默认发单当前条件下所有数据',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.receiveTask();
        },
      });
    } else {
      this.receiveTask();
    }
  };

  // 接单任务
  receiveTask = () => {
    const { selectedRowKeys, formValues } = this.state;
    const { dispatch, activeKey } = this.props;
    dispatch({
      type: 'reducemprec/receiveTask',
      payload: { recvCutTaskIds: selectedRowKeys, ...formValues },
    }).then(response => {
      if (response.success) {
        message.success('接单成功！');
        this.getList(activeKey);
        this.setState({
          selectedRows: [],
          selectedRowKeys: [],
        });
      } else {
        message.warning(`${response.message || '接单失败！'}`);
      }
    });
  };

  // 导出数据
  export = () => {
    const { selectedRowKeys } = this.state;
    if (!selectedRowKeys.length) {
      Modal.confirm({
        icon: <QuestionCircleOutlined />,
        title: '温馨提示',
        content: '如果不选择列表数据，则默认导出当前条件下所有数据',
        okText: '导出',
        cancelText: '取消',
        onOk: () => {
          this.exportExcel();
        },
      });
    } else {
      this.exportExcel();
    }
  };

  // 导出excel
  exportExcel = () => {
    const { activeKey } = this.props;
    const { formValues, selectedRowKeys } = this.state;
    delete formValues.pageArg;
    let params = {
      ...formValues,
    };
    if (activeKey === '4') {
      // 问题人员
      params = {
        ...params,
        busiType: 2,
        hdlState: activeKey,
        detIds: selectedRowKeys.length ? selectedRowKeys : null,
      };
      downloadFile(params, '/nsApi/recvProb/export', 'POST');
    } else {
      params = {
        ...params,
        hdlState: activeKey,
        recvCutTaskIds: selectedRowKeys.length ? selectedRowKeys : null,
      };
      downloadFile(params, '/nsApi/recvDedu/recvd/export', 'POST');
    }
  };

  // 标记问题人员Modal显示隐藏
  showModal = flag => {
    const { form } = this.props;
    const { selectedRows } = this.state;
    form.resetFields();
    if (selectedRows.length) {
      this.setState({
        proVisible: flag,
      });
    } else {
      message.warning('请至少选择一项');
    }
  };

  // 标记问题人员确定
  proHandleOk = () => {
    const { activeKey } = this.props;
    this.toggleProModal(false);
    this.getList(activeKey);
  };

  // 标记问题人员取消
  toggleProModal = flag => {
    this.setState({
      proVisible: flag,
    });
  };

  // 通知签约方
  // notice = () => {
  //   const { dispatch, activeKey } = this.props;
  //   const { selectedRowKeys, selectedRows } = this.state;
  //   if (selectedRowKeys.length) {
  //     const isNoticed = selectedRows.some(item => item.sendSuppFlag && item.sendSuppFlag === 1);
  //     if (isNoticed) {
  //       return message.warning('所选问题人员中含有已通知完成的人员，请选择未通知签约方的人员！');
  //     }
  //     dispatch({
  //       type: 'reducemprec/noticeSign',
  //       payload: {
  //         detIds: selectedRowKeys,
  //         busiType: 2,
  //       },
  //       callback: response => {
  //         if (response.success) {
  //           message.success('通知成功！');
  //           this.setState({ selectedRowKeys: [], selectedRows: [] }, () => {
  //             this.getList(activeKey);
  //           });
  //         } else {
  //           message.warning(`${response.message || '通知失败！'}`);
  //         }
  //       },
  //     });
  //   } else {
  //     message.warning('请至少选择一项');
  //   }
  //   return true;
  // };

  // 取消接单
  cancelReceive = () => {
    const { selectedRowKeys } = this.state;
    const { form } = this.props;
    if (selectedRowKeys.length) {
      this.setState({ cancelReceiveVisible: true });
      form.resetFields(['remark']);
    } else {
      message.warning('请至少选择一条数据！');
    }
  };

  // 提交取消回单办理备注
  submitCancelReceive = () => {
    const { dispatch, form, activeKey } = this.props;
    const { selectedRowKeys } = this.state;
    form.validateFields(['remark'], (err, values) => {
      if (!err) {
        dispatch({
          type: 'reducemprec/cancelReceive',
          payload: { recvOrdCutTaskId: selectedRowKeys, remark: values.remark },
        }).then(response => {
          if (response.success) {
            this.getList(activeKey);
            this.setState({ cancelReceiveVisible: false });
            message.success('取消接单成功！');
          } else {
            message.warning(`${response.message || '取消接单失败！'}`);
          }
        });
      }
    });
  };

  // 取消回单
  cancelReceipt = (record, recvOrdCutTaskId) => {
    this.handleSelectRows([record], [recvOrdCutTaskId]);
    Modal.confirm({
      icon: <QuestionCircleOutlined />,
      title: '取消回单',
      content: '确认要取消回单吗？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        router.push(
          `/receiveordermanage/reduceemployee/cancelreceipt?recvOrdCutTaskId=${recvOrdCutTaskId}`
        );
      },
      onCancel: () => {
        this.setState({ selectedRowKeys: [] });
      },
    });
  };

  // 重置查询条件并获取列表
  async resetAndGeLlist(location) {
    const { dispatch, tabList } = this.props;
    const { queryParam } = location;
    if (queryParam) {
      await dispatch({
        type: 'reducemprec/updateModelData',
        payload: {
          expandForm: true,
        },
      });
    } else {
      const newTabList = tabList.map(item => ({ ...item, isHas: false }));
      dispatch({
        type: 'reducemprec/updateModelData',
        payload: { expandForm: false, tabList: newTabList },
      });
    }
    await this.resetSearch();
    await this.getList(location.query.activeKey, undefined, undefined, queryParam);
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
      supplyList,
      formFieldsValue,
      activeKey,
    } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="签约方" {...this.tableSearchLayout}>
              {getFieldDecorator('sendSuppId', {
                initialValue: formFieldsValue.sendSuppId,
              })(
                // <Supplier allowClear params={{ status: 2 }} />
                <Select
                  placeholder="请输入关键字检索"
                  showSearch
                  optionFilterProp="children"
                  notFoundContent="暂无数据"
                  onSelect={(value, options) => this.getData(value, options)}
                  onChange={this.getsuppId}
                  allowClear
                >
                  {supplyList.map(item => (
                    <Option key={item.suppId} title={item.name}>
                      {item.name}
                    </Option>
                  ))}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="执行地区" {...this.tableSearchLayout}>
              {getFieldDecorator('cityId', {
                initialValue: formFieldsValue.cityId,
              })(<Area allowClear />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit" onClick={() => this.getTabNum(activeKey)}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderAdvancedForm() {
    const {
      form: { getFieldDecorator },
      custList,
      supplyList,
      formFieldsValue,
      activeKey,
    } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="签约方" {...this.tableSearchLayout}>
              {getFieldDecorator('sendSuppId', {
                initialValue: formFieldsValue.sendSuppId,
              })(
                <Select
                  placeholder="请输入关键字检索"
                  showSearch
                  optionFilterProp="children"
                  notFoundContent="暂无数据"
                  onSelect={(value, options) => this.getData(value, options)}
                  onChange={this.getsuppId}
                  allowClear
                >
                  {supplyList &&
                    supplyList.map(item => (
                      <Option key={item.suppId} title={item.name}>
                        {item.name}
                      </Option>
                    ))}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="执行地区" {...this.tableSearchLayout}>
              {getFieldDecorator('cityId', {
                initialValue: formFieldsValue.cityId,
              })(<Area allowClear />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="客户名称" {...this.tableSearchLayout}>
              {getFieldDecorator('custId', {
                initialValue: formFieldsValue.custId,
              })(
                // <Customer />
                <Select placeholder="请选择" showSearch optionFilterProp="children" allowClear>
                  {custList &&
                    custList.map(one => (
                      <Option key={one.custId} value={one.custId} title={one.name}>
                        {one.name}
                      </Option>
                    ))}
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="姓名" {...this.tableSearchLayout}>
              {getFieldDecorator('empName', {
                initialValue: formFieldsValue.empName,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="证件号" {...this.tableSearchLayout}>
              {getFieldDecorator('idCode', {
                initialValue: formFieldsValue.idCode,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="操作时间" {...this.tableSearchLayout}>
              {getFieldDecorator('createTime', {
                initialValue: formFieldsValue.createTime,
              })(
                <RangePicker
                  placeholder={['开始日期', '结束日期']}
                  style={{ width: '100%' }}
                  format="YYYY-MM-DD"
                />
              )}
            </FormItem>
          </Col>
        </Row>
        <div style={{ overflow: 'hidden' }}>
          <div style={{ float: 'right', marginBottom: 24 }}>
            <Button type="primary" htmlType="submit" onClick={() => this.getTabNum(activeKey)}>
              查询
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
              重置
            </Button>
            <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
              收起
              <UpOutlined />
            </a>
          </div>
        </div>
      </Form>
    );
  }

  renderForm() {
    const { expandForm } = this.props;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  render() {
    const {
      data,
      loading,
      // proListData,
      activeKey,
      form: { getFieldDecorator },
      tabList,
      cancelReceiveLoading,
      downloadParams,
    } = this.props;
    const {
      selectedRows,
      selectedRowKeys,
      editFlag,
      proVisible,
      cancelReceiveVisible,
    } = this.state;
    const formItemLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 16 } },
    };
    const moreMenu = (
      <Menu>
        {checkPermissions('ns:recvProb:privSupp:addProb') && (
          <Menu.Item key="remarkProb" onClick={() => this.showModal(true)}>
            标记问题人员
          </Menu.Item>
        )}
        {checkPermissions('ns:recvDedu:cancelRecv') && (
          <Menu.Item key="cancelReceive" onClick={this.cancelReceive}>
            取消接单
          </Menu.Item>
        )}
      </Menu>
    );
    // 待接单
    const columnWaitting = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} alt="问题人员" />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '执行地区',
        dataIndex: 'cityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '签约方',
        dataIndex: 'sendSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '任务类型',
        dataIndex: 'taskSourceName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '发单时间',
        dataIndex: 'sendTime',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        sorter: (a, b) => new Date(b.sendTime) - new Date(a.sendTime),
        render: val => (val ? moment(val).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({
          style: { fontWeight: 'bold', width: 150, textAlign: 'center' },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => (
          <Link
            to={`/receiveordermanage/reduceemployee/detail?recvOrdCutTaskId=${
              record.recvOrdCutTaskId
            }`}
          >
            查看
          </Link>
        ),
      },
    ];
    // 已接单
    const columnsRecsived = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} alt="问题人员" />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        dataIndex: 'idCode',
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '执行地区',
        dataIndex: 'cityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '签约方',
        dataIndex: 'sendSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '任务类型',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        dataIndex: 'taskSourceName',
      },
      {
        title: '接单时间',
        dataIndex: 'recvTime',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        sorter: (a, b) => new Date(b.recvTime) - new Date(a.recvTime),
        render: val => (val ? moment(val).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({
          style: { fontWeight: 'bold', width: 150, textAlign: 'center' },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => (
          <div>
            <Link
              to={`/receiveordermanage/reduceemployee/detail?recvOrdCutTaskId=${
                record.recvOrdCutTaskId
              }&activeKey=${activeKey}`}
            >
              查看
            </Link>

            <Authorized authority="ns:recvDedu:update" noMatch={null}>
              <Divider type="vertical" />
              <a onClick={() => this.orderreceipt(1, record)}>修改</a>
            </Authorized>
          </div>
        ),
      },
    ];
    // 已回单
    const columnsReplied = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} alt="问题人员" />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '执行地区',
        dataIndex: 'cityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '签约方',
        dataIndex: 'sendSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '任务类型',
        dataIndex: 'taskSourceName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '有无修改',
        dataIndex: 'editFlagName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '回单时间',
        dataIndex: 'returnTime',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        sorter: (a, b) => new Date(b.returnTime) - new Date(a.returnTime),
        render: val => (val ? moment(val).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({
          style: { fontWeight: 'bold', width: 150, textAlign: 'center' },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => (
          <Fragment>
            <Link
              to={`/receiveordermanage/reduceemployee/detail?recvOrdCutTaskId=${
                record.recvOrdCutTaskId
              }&activeKey=${activeKey}`}
            >
              查看
            </Link>
            <Authorized authority="ns:recvDedu:cancel:return" noMatch={null}>
              <Divider type="vertical" />
              <a
                onClick={() => {
                  this.cancelReceipt(record, record.recvOrdCutTaskId);
                }}
              >
                取消回单
              </a>
            </Authorized>
          </Fragment>
        ),
      },
    ];
    // 问题人员
    // const columnsProblem = [
    //   {
    //     title: '姓名',
    //     dataIndex: 'empName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '证件号',
    //     dataIndex: 'idCode',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '客户名称',
    //     dataIndex: 'custName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //     render: text => <TextOverFlow text={text} />,
    //   },
    //   {
    //     title: '签约方',
    //     dataIndex: 'sendSuppName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //     render: text => <TextOverFlow text={text} />,
    //   },
    //   {
    //     title: '问题对象',
    //     dataIndex: 'probObj',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '问题类型',
    //     dataIndex: 'probTypeIdName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '是否通知',
    //     dataIndex: 'sendSuppFlagName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '操作',
    //     dataIndex: 'operation',
    //     onHeaderCell: () => ({
    //       style: { fontWeight: 'bold', width: 150, textAlign: 'center' },
    //     }),
    //     onCell: () => ({ style: { textAlign: 'center' } }),
    //     render: (text, record) => (
    //       <Link to={`/receiveordermanage/reduceemployee/prodetail?detId=${record.detId}`}>
    //         查看
    //       </Link>
    //     ),
    //   },
    // ];
    // 已取消
    const columnsCanceled = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} alt="问题人员" />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '执行地区',
        dataIndex: 'cityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '签约方',
        dataIndex: 'sendSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '任务类型',
        dataIndex: 'taskSourceName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '取消时间',
        dataIndex: 'cancelTime',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        sorter: (a, b) => new Date(b.cancelTime) - new Date(a.cancelTime),
        render: val => (val ? moment(val).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({
          style: { fontWeight: 'bold', width: 150, textAlign: 'center' },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => (
          <Link
            to={`/receiveordermanage/reduceemployee/detail?recvOrdCutTaskId=${
              record.recvOrdCutTaskId
            }`}
          >
            查看
          </Link>
        ),
      },
    ];

    // 待接单
    const waitting = (
      <div>
        <Authorized authority="ns:recvDedu:recv" noMatch={null}>
          <Button
            type="primary"
            onClick={this.receive}
            style={{ marginRight: 8, marginBottom: 16 }}
          >
            接单
          </Button>
        </Authorized>
        <Authorized noMatch={null} authority="ns:rcvrDeduProb:addProb">
          <Button
            onClick={() => {
              this.showModal(true);
            }}
          >
            标记问题人员
          </Button>
        </Authorized>
        <StandardTable
          selectedRows={selectedRows}
          loading={loading}
          selectedRowKeys={selectedRowKeys}
          data={data}
          rowKey="recvOrdCutTaskId"
          columns={columnWaitting}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 已接单
    const received = (
      <div>
        <Authorized authority="ns:recvDedu:detail" noMatch={null}>
          <Button
            type="primary"
            onClick={() => this.orderreceipt(2)}
            style={{ marginRight: 8, marginBottom: 16 }}
          >
            回单
          </Button>
        </Authorized>
        <Authorized authority="ns:recvDedu:exportRecvd" noMatch={null}>
          <Button
            icon={<DownloadOutlined />}
            onClick={this.export}
            style={{ marginRight: 8, marginBottom: 16 }}
          >
            导出
          </Button>
        </Authorized>
        <Dropdown overlay={moreMenu}>
          <Button>
            更多
            <DownOutlined />
          </Button>
        </Dropdown>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="recvOrdCutTaskId"
          columns={columnsRecsived}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 已回单
    const replied = (
      <div>
        <div style={{ marginBottom: '16px' }}>
          <Authorized authority="ns:recvDedu:exportRecvd" noMatch={null}>
            <Button
              type="primary"
              icon={<DownloadOutlined />}
              onClick={this.export}
              style={{ marginRight: 8 }}
            >
              导出
            </Button>
          </Authorized>
          <div style={{ float: 'right' }}>
            <RadioGroup
              className={styles.floatRight}
              value={editFlag}
              onChange={e => {
                this.setState({ editFlag: e.target.value }, () => {
                  this.getList(activeKey);
                });
              }}
            >
              <RadioButton value={undefined}>全部</RadioButton>
              <RadioButton value={2}>无修改</RadioButton>
              <RadioButton value={1}>有修改</RadioButton>
            </RadioGroup>
          </div>
        </div>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={data}
          rowKey="recvOrdCutTaskId"
          columns={columnsReplied}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const problem = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Authorized noMatch={null} authority="ns:rcvrDeduProb:addProbFdbk">
            <Button
              type="primary"
              onClick={() =>
                router.push('/receiveordermanage/reduceemployee/batchfeedback?busiType=9')
              }
              style={{ marginRight: 8 }}
            >
              批量反馈
            </Button>
          </Authorized>
          {/* <Authorized authority="ns:recvProb:sendSupp:notice" noMatch={null}>
          <Button onClick={this.notice} style={{ marginRight: 8, marginBottom: 16 }}>
            通知签约方
          </Button>
        </Authorized> */}
          <Authorized noMatch={null}>
            <ProExportBtn selectedRowKeys={selectedRowKeys} downloadParams={downloadParams} />
          </Authorized>
        </Row>
        {/* <StandardTable
          selectedRows={selectedRows}
          loading={loading}
          selectedRowKeys={selectedRowKeys}
          data={proListData}
          rowKey="detId"
          columns={columnsProblem}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        /> */}
        <ProTable
          onRef={e => {
            this.setState({ proTable: e });
          }}
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          onSelectRow={this.handleSelectRows}
          proUrl="/receiveordermanage/reduceemployee/problem"
          busiType="9"
        />
      </div>
    );
    // 已取消
    const canceled = (
      <div>
        <StandardTable
          selectedRows={selectedRows}
          loading={loading}
          selectedRowKeys={selectedRowKeys}
          data={data}
          rowKey="recvOrdCutTaskId"
          columns={columnsCanceled}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 获取页签组件
    const getTabPane = key => {
      switch (key) {
        case '1':
          return waitting;
        case '2':
          return received;
        case '3':
          return replied;
        case '4':
          return problem;
        case '5':
          return canceled;
        default:
          return <div />;
      }
    };
    return (
      <PageHeaderWrapper>
        <Card className={styles.searchCard} bordered={false}>
          <div className={styles.tableListForm}>{this.renderForm()}</div>
        </Card>
        <Card className={styles.tabCard}>
          <div className={styles.tableList}>
            <Tabs activeKey={activeKey} onChange={this.changeTabPane}>
              {tabList.map(pane => (
                <TabPane tab={<Badge dot={pane.isHas}>{pane.itemName}</Badge>} key={pane.itemCode}>
                  {getTabPane(pane.itemCode)}
                </TabPane>
              ))}
            </Tabs>
          </div>
        </Card>
        {proVisible && (
          <ProModal
            selectedRows={selectedRows}
            selectedRowKeys={selectedRowKeys}
            busiType="9"
            onOk={this.proHandleOk}
            onCancel={() => this.toggleProModal(false)}
            isProObj
          />
        )}
        <Modal
          title="取消接单"
          destroyOnClose
          visible={cancelReceiveVisible}
          onOk={this.submitCancelReceive}
          onCancel={() => this.setState({ cancelReceiveVisible: false })}
          confirmLoading={cancelReceiveLoading}
        >
          <FormItem {...formItemLayout} label="办理备注">
            {getFieldDecorator('remark', {
              rules: [{ required: cancelReceiveVisible, message: '请输入' }],
            })(
              <TextArea
                placeholder="请输入"
                autosize={{ minRows: 3, maxRows: 6 }}
                maxLength="100"
              />
            )}
          </FormItem>
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default TableList;
